<div class="container" data-id="configuracionUsuario">
    <div>

    </div>
    <div class="tabbable tabs-left usuariosMod">
        <div>
            <img style="margin-top: 3%; width: 12%; height: 12%;" src="img/silueta.gif">
        </div>
        <ul style="margin-left: 20%;margin-top: -10%;" class="nav nav-tabs">
            <li class="active">
                <a href="#lA"  data-toggle="tab"> Datos personales </a>
            </li>
            <li>
                <a href="#lB" data-toggle="tab"> Cambiar mail </a>
            </li>
            <li>
                <a href="#lC" data-toggle="tab"> Cambiar nombre usuario </a>
            </li>
            <li>
                <a href="#lD" data-toggle="tab"> Cambiar contraseña </a>
            </li>
        </ul>
        <div  style="margin-left: 45%;margin-top: -8%;" class="tab-content contenidoMod">
            <div class="tab-pane active" id="lA">
                <p>
                    Tu nombre es <b><span data-bind= "text: $data.nombre"> </span></b> y tu apellido <b><span data-bind="text: $data.apellido"></span></b>
                </p>
                <form class="form-horizontal">
                    <label class=" " for="nombreUsu">Nombre:
                        <input type="text" name="nombreUsu" id="nombreUsu" data-bind="value: $data.nombre">
                    </label>
                    <label for="apesUsu">Apellidos:
                        <input type="text" name="apesUsu" id="apesUsu" data-bind="value: $data.apellido">
                    </label>
                    <span class="aviso1M"></span>
                </form>
                <div class="botonesPerfil">
                    <div data-id="botonMod1">
                        <button class="btn btn-primary" data-bind="click: $data.ok">
                            Guardar Cambios
                        </button>
                    </div>
                    <div class="butonMod">
                        <button class="btn btn-primary" data-bind="click: $data.cancel">
                            Cancelar
                        </button>
                    </div>
                </div>

            </div>
            <div class="tab-pane" id="lB">
                <p>
                    Tu correo electrónico actual es <b><span data-bind="text: $data.email"></span></b>
                </p>
                <form class="form-horizontal">
                    <label for="emailUsu">Si deseas puedes cambiar tu email:
                        <input type="text" name="emailUsu" id="emailUsu" data-bind="value:$data.email">
                    </label>
                    <span class="aviso2M"></span>
                </form>
                <div class="botonesPerfil">
                    <div data-id="botonMod2" data-bind="click: $data.ok">
                        <button class="btn btn-primary">
                            Guardar Cambios
                        </button>
                    </div>
                    <div class="butonMod">
                        <button class="btn btn-primary" data-bind="click: $data.cancel">
                            Cancelar
                        </button>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="lC">
                <p>
                    Tu nombre de usuario actual es <span data-bind="text: $data.user"></span>
                </p>
                <form class="form-horizontal">
                    <label for="userUsu">Nuevo nombre de usuario:
                        <input type="text" name="userUsu" id="userUsu" data-bind="value: $data.user">
                    </label>
                    <span class="aviso3M"></span>
                </form>
                <div class="botonesPerfil">
                    <div data-id="botonMod3">
                        <button class="btn btn-primary">
                            Guardar Cambios
                        </button>
                    </div>
                    <div class="butonMod">
                        <button class="btn btn-primary" data-bind="click: $data.cancel">
                            Cancelar
                        </button>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="lD">
                <p>
                    Si desea cambiar la contraseña rellene los siguientes campos:
                </p>
                <form class="form-horizontal">
                    <label for="contraUsu">Nueva contraseña:
                        <input type="password" name="contraUsu" id="contraUsu">
                    </label>
                    <label for="contraUsu2">Repita la contraseña:
                        <input type="password" name="contraUsu2" id="contraUsu2">
                    </label>
                    <span id="contrase�aIncorrectas"></span>
                </form>
                <div class="botonesPerfil">
                    <div data-id="botonMod4">
                        <button class="btn btn-primary" data-bind="click: $data.ok">
                            Guardar Cambios
                        </button>
                    </div>
                    <div class="butonMod">
                        <button class="btn btn-primary" data-bind="click: $data.cancel">
                            Cancelar
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div id="modalCambiosUsuarios" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                ×
            </button>
            <h3 style="color: #044482;">Datos cambiados con �xito</h3>
        </div>
    </div>
    <div id="modalCambiosError" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                ×
            </button>
            <h3 style="color: #B94A48;">El nombre de usuario introducido ya existe, pruebe con otro.</h3>
        </div>
    </div>
</div>

